<template>
  <div id="app">

    <router-link to="/home">主页</router-link> |
    <router-link to="/discover">发现</router-link>|
    <router-link to="/friend">铠甲勇士</router-link>|
    <router-link to="/goods">果蔬</router-link>|
    <router-link to="/count">计数器</router-link>|
    <router-link to="/Shopping">购物车</router-link>|
    <button @click="jump">传送门</button>
    <router-view />
  </div>
</template>

<script>
  export default{
    methods: {
      jump(){
        //编程式导航，使用js逻辑来控制路由的跳转，而不是使用router-link组件跳转
        //push 向浏览器历史记录栈中压入一个记录
        // 1.传入路径
        // this.$router.push("/discover")
        // 2.传入对象,通过路径跳转
        // this.$router.push({path: "/discover"})
        // 2.2 传入对象,通过name跳转
        // this.$router.push({name:'djradio'})
        //参数的传递 query params，这两种传参有什么区别？query 刷新页面不会丢失，params刷新页面会丢失（不想params丢失就存到本地存储）
        // this.$router.push({path: "/home",query:{singer:"Jay"}})
        this.$router.push({name: "home",params:{singer:"Jay"}})
        
        //replace 替换掉上个历史记录
        
        //和push的用法是一摸一样,一个区别就是,会替换掉上一个历史记录,访问不会产生历史记录

        // this.$router.replace('/discover')

        //go(number) 去到第几个历史记录,以当前的历史记录为原点,当前就是0,左边的历史记录就是负值 右边的是正值

        // this.$router.go(-1)

        //forward 前进 相当于点击了浏览器历史记录的前进按钮

        //back 后退 相当于点击了浏览器历史记录的后退按钮
      }
    }
  }
</script>

